<template>
  <van-nav-bar
      title="发布资讯页面"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
  />
  <div>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
            v-model="title"
            name="资讯题目"
            label="资讯题目"
            placeholder="资讯题目"
            :rules="[{ required: true, message: '请填写资讯题目' }]"
        />
        <van-field
            v-model="author"
            name="资讯作者"
            label="资讯作者"
            placeholder="资讯作者"
            :rules="[{ required: true, message: '请填写资讯作者' }]"
        />
        <van-field
            v-model="category"
            is-link
            readonly
            name="资讯类型"
            label="资讯类型"
            placeholder="点击选择资讯类型"
            @click="showPicker = true"
        />
        <van-popup v-model:show="showPicker" position="bottom">
          <van-picker
              :columns="columns"
              @confirm="onConfirm"
              @cancel="showPicker = false"
          />
        </van-popup>
        <van-field
            v-model="content"
            rows="5"
            autosize
            label="资讯内容"
            type="textarea"
            maxlength="200"
            placeholder="请输入内容"
            show-word-limit
        />
      </van-cell-group>
      <van-uploader  :after-read="handleRead" multiple :max-count="1" />
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          发布资讯
        </van-button>
      </div>
    </van-form>

  </div>
</template>

<script setup>
import { ref } from 'vue';
import {useRouter} from "vue-router";
const router = useRouter();
import {get, post} from "../../util/request.js";
import {showToast} from "vant";
import axios from "axios";
import {postFile} from "../../util/reqeustfile.js";
const onClickLeft = () => history.back();
// const form=ref({
//   title:'',//资讯题目
//   author:'',//资讯作者
//   category:'',//资讯分类
//   content:'',//资讯内容
//   imageUrl:'',//资讯图片
//   publishDate:''//发布时间
// })
const title=ref('');
const author=ref('');
const category=ref('');
const content=ref('');
const imageUrl=ref('1111111');
const publishDate=ref('');


const onSubmit = () => {
  post('home/createNews',
      {
        title:title.value,
        author:author.value,
        category:category.value,
        content:content.value,
        imageUrl:imageUrl.value,
      }).then( r=>{
    if (r.code == 0)
    { // 获取成功
   router.push('/news')
    }else {
      showToast("发布失败")
      // 加载状态结束
    }
  }).catch(function (){
    alert("发布异常")
  });
};
const handleRead =( async (file) =>{
  // console.log(file)
  // console.log(file.file)
  // const formData = new FormData();
  // formData.append('file', file.file); // 确保file.file是正确的，如果file就是文件对象，则应该是formData.append('file', file);

  // 发送POST请求到您的后端接口，确保传递formData且不包含多余的headers配置
  const response = await postFile('study/article/upload', file);
  imageUrl.value=(response.data);
  // console.log(imageUrl.value);
  // 这里可以根据需要处理成功的逻辑，比如显示提示信息
});
const showPicker = ref(false);
const columns = [
  { text: '学习资讯', value: '学习资讯' },
  { text: '建筑资讯', value: '建筑资讯' },
  { text: '考研资讯', value: '考研资讯' },
];

const onConfirm = ({ selectedOptions }) => {
  category.value = selectedOptions[0]?.text;
  showPicker.value = false;
};

const showDialog = ref(false);
const currentDate = ref(['2022', '06', '01']);
const currentTime = ref(['12', '00','00']);
const columnsType = ['hour', 'minute', 'second'];
const onConfirmTime=({})=>{
  publishDate.value=`${currentDate.value.join('-')} ${currentTime.value.join(':')}`,
      showDialog.value=false;
}
const onCancelTime=()=>{
  showDialog.value=false;
}


</script>

<style scoped>

</style>